<template>
	<el-card>
		<div class="arrange-panel-header">
			<div class="class-profiles">
				<div class="title">{{heardTitle}}</div>
			</div>
			<el-button class="float-right" @click="back">{{$t('common.btn.back')}}</el-button>
		</div>
		<div style="margin-top: 24px;">
			<el-form :model="coursesQueryForm" label-position="right" label-width="80px" label-suffix=":">
				<el-row :gutter="24">
					<el-col :offset="2" :span="8">
						<el-form-item :label="$t('arrangement.faculty')">
							<el-select v-model="coursesQueryForm.college" style="width: 100%;">
								<el-option
									v-for="item in options.college"
									:key="item.value"
									:label="item.label"
									:value="item.value"
								></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item :label="$t('label.trainingLevel')">
							<el-select v-model="coursesQueryForm.trainingLevel" style="width: 100%;">
								<el-option
									v-for="item in options.trainingLevel"
									:key="item.value"
									:label="item.label"
									:value="item.value"
								></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<div class="float-right">
							<el-button @click="resetCoursesQuery">{{$t("message.reset")}}</el-button>
							<el-button type="primary" @click="getCoursesByCondition()">{{$t("message.filter")}}</el-button>
						</div>
					</el-col>
				</el-row>
			</el-form>
			<div style="border-top:1px solid #ccc;height:1px;margin-bottom:20px"></div>

			<div class="edu-opertion-bar">
				<div
					class="edu-page-title"
					style="margin-bottom: 16px;font-size:16px"
				>{{$t('courseArrange.engAutoArrange.courseList')}}</div>
				<div class="float-left">
					<el-input
						v-model="coursesQueryForm.condition"
						:placeholder="$t('courses.searchCourseList')"
						style="width:200px"
						@keyup.enter.native="getCoursesByCondition()"
					>
						<i
							class="el-icon-search"
							slot="suffix"
							style="margin-top:10px;cursor:pointer"
							@click="getCoursesByCondition()"
						></i>
					</el-input>
				</div>
			</div>
			<edu-table
				:data="courses"
				@selection-change="chooseAddCourse"
				@page-change="handleCourseCurrentChange"
				:total="coursesQueryForm.total_"
				:pageSize="coursesQueryForm.pageSize_"
				:current-page="coursesQueryForm.pageNum_"
			>
				<edu-table-column prop="code" :label="$t('courses.courseCode')"></edu-table-column>
				<edu-table-column prop="name" :label="$t('courses.courseName')"></edu-table-column>
				<edu-table-column prop="college" :label="$t('arrangement.faculty')"></edu-table-column>
				<edu-table-column prop="credits" :label="$t('courses.credits')"></edu-table-column>
				<edu-table-column prop="period" :label="$t('courses.period')"></edu-table-column>
				<edu-table-column :label="$t('courses.label')" min-width="120px">
					<template slot-scope="scope">
						<el-select
							v-model="scope.row.tagTexts"
							style="width:100%;"
							multiple
							collapse-tags
							:placeholder="$t('common.pla.pleaseSelect')"
						>
							<el-option
								v-for="item in options.courseLabel"
								:key="item.value"
								:label="item.label"
								:value="item.value"
							></el-option>
						</el-select>
						<!-- <div class="mycell">
							<div :key="index" v-for="(c,index) in scope.row.tagTexts">
								{{c}}
								<i
									class="el-icon-remove-outline"
									style="cursor:pointer"
									@click="removeTag(c,scope.row)"
								></i>
							</div>
						</div>
						<el-dropdown placement="bottom-start" @command="addTag" style="float:left">
							<span class="el-dropdown-link">
								<i class="el-icon-circle-plus-outline" style="cursor:pointer"></i>
							</span>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item
									:key="c.value"
									:command="c.value+','+scope.row.id"
									v-for="c in options.courseLabel"
								>{{c.label}}</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>-->
					</template>
				</edu-table-column>
			</edu-table>
			<el-row :gutter="24">
				<el-col :span="24">
					<div class="float-right no-bottom no-right" style="margin-top:10px">
						<el-button @click="back">{{$t("message.cancel")}}</el-button>
						<el-button type="primary" @click="addCourses">{{$t("message.confirm")}}</el-button>
					</div>
				</el-col>
			</el-row>
		</div>
	</el-card>
</template>
<script>
import {
	getCourses,
	getCoursesByCondition,
	addCourses
} from "common/src/api/resource/publicCourse";

export default {
	name: "AddCourseComponent",
	props: {
		heardTitle: {
			type: String
		},
		options: {
			type: Object
		}
	},
	data() {
		return {
			categoryId: "",
			coursesQueryForm: {
				pageNum_: 1,
				pageSize_: 20,
				total_: 0,
				college: "",
				trainingLevel: "",
				condition: "",
				isElective: 1,
				status: 3
			},
			chooseAddCourses: [],
			courses: []
		};
	},
	created() {},
	computed: {},
	methods: {
		//重置课程筛选条件
		resetCoursesQuery() {
			this.coursesQueryForm.trainingLevel = "";
			this.coursesQueryForm.college = "";
			this.coursesQueryForm.condition = "";
		},
		handleCourseCurrentChange(val) {
			this.coursesQueryForm.pageSize_ = val.pageSize;
			this.coursesQueryForm.pageNum_ = val.pageNum;
			this.getCoursesByCondition();
		},
		//查询课程列表
		getCoursesByCondition(categoryId) {
			if (categoryId) {
				this.categoryId = categoryId;
				this.resetCoursesQuery();
			}
			getCourses(this.coursesQueryForm).then(res => {
				if (res.code == 200) {
					this.coursesQueryForm.total_ = res.data.total_;
					res.data.list.forEach(c => {
						c.tagTexts = [];
						c.tagValues = [];
					});
					this.courses = res.data.list;
				}
			});
		},

		// addTag(command) {
		// 	let ids = command.split(",");
		// 	let course = this.courses.find(c => c.id == ids[1]);
		// 	let tag = this.options.courseLabel.find(c => c.value == ids[0]);
		// 	if (course.tagValues.includes(ids[0])) {
		// 		if (!course.tagValues.includes(ids[0])) {
		// 			course.tagTexts.push(tag.label);
		// 			course.tagValues.push(ids[0]);
		// 		}
		// 	} else {
		// 		course.tagValues.push(ids[0]);
		// 		course.tagTexts.push(tag.label);
		// 	}
		// },
		// removeTag(text, row) {
		// 	row.tagTexts = row.tagTexts.filter(t => t != text);
		// 	let tag = this.options.courseLabel.find(c => c.label == text);
		// 	row.tagValues = row.tagValues.filter(t => t != tag.value);
		// },

		addCourses() {
			if (this.chooseAddCourses.length == 0) {
				this.$message({
					type: "info",
					message: this.$t("courses.plsChooseCourses")
				});
				return;
			}
			// if (this.chooseAddCourses.some(c => c.terms == null)) {
			//     this.$message({
			//         type: "info",
			//         message: "选中课程的开课学期必须选择"
			//     });
			//     return;
			// }
			let data = {
				categoryId: this.categoryId,
				type: 1,
				coursesCategoryRelList: []
			};

			this.chooseAddCourses.forEach(c => {
				data.coursesCategoryRelList.push({
					courseCode: c.code,
					//term: c.terms,
					//tag: c.tagValues.length > 0 ? c.tagValues.join(",") + "," : ""
					tag: this.getTagStr(c.tagTexts)
				});
			});
			addCourses(data).then(res => {
				if (res.code == 200) {
					this.$message({
						type: "success",
						message: this.$t("common.tips.addSuccess")
					});
					this.back();
					//this.getCoursesMaintain();
				}
			});
		},
		getTagStr(data) {
			let str = "";
			for (const item of data) {
				str += item + ",";
			}
			if (str != "") {
				str = str.slice(0, str.length - 1);
			}
			return str;
		},
		chooseAddCourse(val) {
			this.chooseAddCourses = val;
		},
		back() {
			this.$emit("back");
		}
	}
};
</script>

<style lang="scss" scoped>
.arrange-panel-header {
	height: 56px;
	border-bottom: 2px solid #dcdfe6;
	cursor: default;
	.title {
		font-size: 20px;
		color: #000;
		font-weight: bold;
	}
	.class-profiles {
		float: left;
		width: 40%;
		div {
			padding: 5px 0;
		}
	}
}
</style>

